<!DOCTYPE html> 

<html> 

	<head> 

		<meta charset="utf-8" /> 

		<title>显示模式</title> 

		<style> 

			.a{ 

				width: 400px; 

				height: 450px; 

				background-color: black; 

				border: 1px red solid; 

			} 

			.b{ 

				width: 500px; 

				height: 1000px; 

				background-color: blue; 

			} 

		</style> 

	</head> 

	<body> 

		<!-- 元素显示模式： 

		1.块元素 block 

		比较霸道，独占一行 

		默认情况下宽度和父级元素一样宽 

		可以给元素设置宽，高，水平居中 

		块元素中可以包含行内元素和块元素 

		常见块元素 

		div p ul h1~h6 

		2.行内元素 lnline 

		一行显示多个 

		默认宽度由内填充，内容多宽元素多宽 

		宽，高，水平居中属性设置不上，不适用 

		常见行内元素 

		a span del strong em 

		3.行内元素 inline-block 

		一行显示多个 

		默认宽度由内容填充，内容多宽元素多宽 

		可以设置 宽，高 

		input img td (数据单元格) 

		元素模式的转换 

		display：转换后的显示模式 

		display：block 

		text-decoration:onne; 去掉a标签下的下划线 --> 

	<div class="a"> 

		< img src="小米.jpg"/> 

		<h3>性能优越 品质保障</h3> 

		<span class="b">2999</span> 

		<span>3999</span> 

		链接 

	</div> 

		 

	</body> 

</html>